<script setup>
import { fetchCityData } from '@/api/weatherAPI'
import { ref } from 'vue'
//引入状态管理
import { useCityStore } from "../stores/cityStore";

const city = ref('') //数据【引用】，用于页面与api中的联系
//获取store实例
const cityStore = useCityStore()

//调用根据城市名称获取数据的函数
function request(){
  getData(city.value)
}
//根据城市名称获取城市位置数据
async function getData(cityName) {
  const res = await fetchCityData(cityName)
  console.log(res)

  //调用状态管理中的actions方法：更新地理位置信息
  cityStore.updateLocation(res.location[0])
 
}
</script>

<template>
  <div>
    <!-- 添加搜索文本框 -->
    <input type="search" name="" id="" placeholder="请输入城市名称" v-model="city" @change="request()">
  </div>
</template>

<style scoped>
</style>